<template>
    <div id="openProjectPage">
        <div class="historyList">
            <div class="title">历史记录</div>
            <TeSplit />
        </div>
        <div class="openProject">
            <div class="button" @click="selectFolder">选择项目</div>
        </div>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
    import TeSplit from '../../../components/TeUi/TeSplit.vue';
    import pluginManager from '../../../script/file/manager';
    @Component({
        name: 'index',
        components: {
            TeSplit
        }
    })
    export default class openProject extends Vue {
        selectFolder() {
            this.$root.$data.electron.ipcSend('selectFolder', 'projectRoot');
            this.$root.$data.electron.ipcOnce('projectRoot', (e, m) => {
                try {
                    if (m.filePaths.length === 0) {
                        return;
                    }
                    let s = pluginManager.readFile(m.filePaths[0]);
                    if (pluginManager.checkProject(s) === false) {
                        throw 'Error File';
                    }
                    this.$root.$data.store.currentProject.project = s;
                    this.$root.$router.push({ path: `/view/edit` });
                } catch (error) {
                    console.log(error);
                    alert('错误！');
                } finally {
                    return;
                }
            });
        }
    }
</script>

<style scoped>
    #openProjectPage {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .historyList {
        height: 500px;
        width: 800px;
        background: rgb(19, 169, 255);
        border-radius: 25px 25px 0 0;
    }
    .historyList .title {
        text-align: center;
        font-size: 1.2em;
        font-weight: 800;
        color: white;
    }
    .button {
        width: 800px;
        height: 4em;
        background: cadetblue;
        color: white;
        font-weight: 900;
        font-size: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .button:hover {
        cursor: pointer;
        background: rgba(95, 158, 160, 0.425);
        color: rgba(255, 255, 255, 0.596);
    }
</style>
